<template>
  <div class='root'>
      <ul>
          <li v-for='(v,i) in data' 
              :class = "curIndex === i ? 'active':''" 
              :key='v.id'
              @click="$store.commit({type:'change_curIndex',curIndex:i})">{{v.type}}</li>
      </ul>
      <ol>
          <li v-for='v in data.length && data[curIndex].children' :key='v.id'>
              <van-card
                  :num="v.num"
                  :price="v.price"
                  :desc="v.title"
                  :title="v.name"
                  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                >
                  <template #tags>
                    <van-tag plain type="danger">免费</van-tag>
                    <van-tag plain type="danger">白送</van-tag>
                  </template>
                  <template #footer>
                    <van-button size="mini" @click="$store.commit({type:'sub_product',id:v.id})">-</van-button>
                    <van-button size="mini" @click="$store.commit({type:'add_product',id:v.id})">+</van-button>
                  </template>
              </van-card>
          </li>
      </ol>
  </div>
</template>

<script>
import {mapState} from 'vuex' 

export default {
  computed:{
      ...mapState(['data','curIndex'])
  }
}
</script>

<style scoped>
  .root{
    width:100%;
  }

  .root ul{
    width:25%;
    float: left;
  }

  .root ol{
    width:75%;
    float: left;
  }

  .active{
    color:red;
  }
</style>